<template>
	<view>
		<view class="list list1 list2">
			<view class="person">
				<view class="head_img">
					<image src="../../static/image/head.png" @click="detailsData"></image>
				</view>
				<view class="name">两小只</view>
			</view>
			<view class="person">
				<view class="head_img">
					<image src="../../static/image/tianjia_21.png"></image>
				</view>
			</view>
		</view>
		<view class="list list1 list2 bot bot1" @click="searchChat">
			<view>查找聊天内容</view>
			<image src="../../static/image/fanhui_21.png" class="fanhui"></image>
		</view>
		<view class="list bot list1 list3">
			<view class="list2 bot1 bot2 bot3">
				<view>置顶聊天</view>
				<switch class='blue' @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
			</view>
			<view class="list2 bot1 bot2">
				<view>消息免打扰</view>
				<switch class='blue' @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false"></switch>
			</view>
		</view>
		<view class="list list1 list2 bot bot1 jiamis" @click="complaints">
			<view>加密</view>
			<view class="jiami">
				<view><image src="../../static/image/shou_guan_21.png"></image></view>
				<view><image src="../../static/image/shou_kai_21.png"></image></view>
			</view>
		</view>
		<view class="list list1 list2 bot bot1" @click="complaints">
			<view>投诉</view>
			<image src="../../static/image/fanhui_21.png" class="fanhui"></image>
		</view>
		<view class="list list1 list2 bot bot1" @click="deletes">
			<view>清空聊天记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switchA: false,
				switchB: true
			}
		},
		onShow() {
			this.$msgchat.initwork();
		},
		methods: {
			SwitchA(e) {
				this.switchA = e.detail.value
			},
			SwitchB(e) {
				this.switchB = e.detail.value
			},
			//详细资料
			detailsData(){
				uni.navigateTo({
					url:'../detailsData/detailsData'
				})
			},
			//查找聊天内容
			searchChat(){
				uni.navigateTo({
					url:'../searchChat/searchChat'
				})
			},
			//投诉
			complaints() {
				uni.navigateTo({
					url: '../complaints/complaints'
				})
			},
			//清空聊天记录
			deletes(){
				uni.showModal({
				    title: '',
				    content: '确认清除当前对话的聊天记录？',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style>
	page {
		width: 100vw;
		background: #F5F4F9;
	}

	.list {
		background: #FFF;
		padding: 25upx 30upx;
	}

	.list1 {
		border-top: 1px solid #E8E8E8;
		border-bottom: 1px solid #E8E8E8;
	}

	.list2 {
		display: flex;
		justify-content: flex-start;
	}

	.person {
		width: 20%;
		text-align: center;
	}

	.head_img {
		width: 80%;
		padding-top: 80%;
		position: relative;
		left: 10%;
	}

	.head_img image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		border-radius: 50%;
	}

	.name {
		font-size: 30upx;
		margin-top: 10upx;
	}

	.bot {
		margin-top: 25upx;
		letter-spacing: 3upx;
	}

	.fanhui {
		width: 20upx;
		height: 30upx;
	}

	.bot1 {
		align-items: center;
		justify-content: space-between;
		padding: 35upx 30upx;
	}

	.bot2 {
		padding: 30upx 0;
	}

	.bot3 {
		border-bottom: 1px solid #E8E8E8;
	}

	.list3 {
		padding: 0 30upx;
	}

	.jiami view image {
		width: 25upx;
		height: 30upx;
	}

	.jiamis {
		padding: 20upx 30upx;
	}
</style>
